<template>
	<div>
		<header>
			<div :class="['line', 'active' + selected]"></div>
			<ul>
				<li
					:class="[selected == item.id ? 'active' : '']"
					v-for="item in others"
					:key="item.id"
					@click="selected = item.id"
				>
					{{ item.name }}
				</li>
			</ul>
		</header>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				key: 'value',
				others: [
					{
						id: 1,
						name: '首页'
					},
					{
						id: 2,
						name: '个人'
					},
					{
						id: 3,
						name: '活动'
					},
					{
						id: 4,
						name: 'hello'
					}
				],
				selected: true,
				value: 1
			}
		},
		methods: {
			change(value) {
				if (value === 2) {
					this.selected = false
				} else {
					this.selected = true
				}
				console.log(value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	header {
		position: relative;
		.line {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 50px;
			height: 3px;
			background-color: cyan;
			transition: all 0.5s ease;
		}
		.active1 {
			transform: translateX(0);
		}
		.active2 {
			transform: translateX(100%);
		}
		.active3 {
			transform: translateX(200%);
		}
		.active4 {
			transform: translateX(300%);
		}
	}

	ul {
		display: flex;

		li {
			margin-left: 10px;
			font-size: 18px;
			color: #999;
		}
		.active {
			font-size: 20px;
			color: #333;
		}
	}
</style>
